<!DOCTYPE html>
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
    <html>
        <head>

            <!-- Set the viewport width to device width for mobile -->
            <meta name="viewport" content="width=device-width" />            

            <link rel="stylesheet" href="recursos/css/loadingGif.css">		

            <link rel="stylesheet" type="text/css"href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
            <link rel="stylesheet" type="text/css" href="recursos/css/font-awesome.min.css">
            <link rel="stylesheet" type="text/css" href="recursos/css/component.css"/>
            <link rel="stylesheet" type="text/css"  href="recursos/css/style.css" />

            <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
            <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
            <!--         
                        <script type="text/javascript" src="recursos/js/custom.js"></script>-->
            <script type="text/javascript" src="recursos/js/jquery-ui-timepicker-addon.js"></script> 
            <script type="text/javascript" src="recursos/js/jquery-ui-sliderAccess.js"></script>
            <script type="text/javascript" src="recursos/js/funciones_generales.js"></script>

            <link rel="stylesheet" type="text/css" href="recursos/css/normalize.css" />
            <link rel="stylesheet" type="text/css" href="recursos/css/foundation.css" />
            <script  type="text/javascript"  src="recursos/js/vendor/custom.modernizr.js"></script>                                  

        </head>
        <body>

            <div id="divLoading" class="white_content"><img id='loadingGif' src='recursos/imagenes/ajax-loader.gif' alt='' /></div>
            <div id="general_error" style="display: none"></div>
            <!--div id="divGeneralError">This is where you will put your inline HTML for the content inside of the overlay his is where you will put your inline HTML for the content inside of the overlay his is where you will put your inline HTML for the content inside of the overlay </div-->
            <div id="divBackGround" class="black_overlay"></div>

            <!-- Navigation -->

            <div class="row">
                <div class="large-12 columns">
                    <h2>ServiPortuarios</h2>
                    <p>Version 1.0</p>
                    <hr />
                </div>
            </div>
            <!-- End Top Bar -->
            
            <!--div class="row">
            <div class="large-12 columns">
                <div class="row">
                    <div class="large-12 hide-for-small">

                        <div id="featured" data-orbit>
                            <img src="http://placehold.it/1200x400&text=Slide Image 1" alt="slide image">
                            <img src="http://placehold.it/1200x400&text=Slide Image 2" alt="slide image">
                            <img src="http://placehold.it/1200x400&text=Slide Image 3" alt="slide image">
                        </div>

                    </div>
                </div-->

                    <!-- End Content Slider -->

                    <!-- Mobile Header -->

                    <div class="row">
                        <div class="large-12 columns show-for-small">

                            <img src="http://placehold.it/1200x700&text=Mobile Header">

                        </div>
                    </div><br>

                    <!-- End Mobile Header -->
                    <div class="row">
                        <div class="large-12 columns">
                            <div class="row">
                                <div class="large-6 columns">
                                    <div class="panel radius">
                                        <br>
                                        <form action="#" method="post" id="frmLogin" class="login" data-abide>
                                            <fieldset>
                                                <div class="row" >
                                                    <div class="columns">
                                                        <input id="login" required  name="login" type="text" placeholder="Usuario" >
                                                    </div>
                                                </div>
                                                <div class="row">
                                                    <div class="columns">
                                                        <input id="password" required name="password" type="Password" placeholder="password" >
                                                    </div>
                                                </div>
                                                <div class="row columns">
                                                    <button id="loginButton" name="loginButton" class="medium button green" type="submit">Entrar</button>
                                                </div>
                                            </fieldset>
                                        </form>    
                                    </div>
                                </div>  
                                <div class="large-6 columns">
                                    <div class="panel callout radius">
                                        <h5>Nuestra Empresa</h5>
                                        <p>SERVIPORTUARIOS LTDA. Nace en el a&ntilde;o de 1992 como producto de un trabajo de investigaci&oacute;n realizado por William Mestre y otros colaboradores; quienes en el momento no llegaron a considerar la realizaci&oacute;n de alguna actividad portuaria. Sin embargo William Mestre visualiz&oacute; la necesidad que exist&iacute;a en el mercado de empresas que se dedicaran a la manipulaci&oacute;n de mercanc&iacute;a y carga, decidiendo contactar a Sady Pacheco a quien le propone construir una sociedad a fin de satisfacer las necesidades de este mercado creciente.</p>                                                
                                    </div>
                                </div>                

                            </div>
                        </div>
                    </div>

                    <!-- End Content -->

                    <!-- Footer -->

                    <footer class="row">
                        <div class="large-12 columns"><hr>
                            <div class="row">

                                <div class="large-6 columns">
                                    <p>&copy; Derechos reservados.</p>
                                </div>

                                <!--div class="large-6 small-12 columns">
                                    <ul class="inline-list right">
                                        <li><a href="#">Link 1</a></li>
                                        <li><a href="#">Link 2</a></li>
                                        <li><a href="#">Link 3</a></li>
                                        <li><a href="#">Link 4</a></li>
                                    </ul>
                                </div-->

                            </div>
                        </div>
                    </footer>

                    <!-- End Footer -->

                </div>
            </div>

            <script>
                document.write('<script src=recursos/js/vendor/' +
                        ('__proto__' in {} ? 'zepto' : 'jquery') +
                        '.js><\/script>')
            </script>
            <script src="recursos/js/foundation.min.js"></script>
            <script>
                $(document).foundation();
            </script>
            <!-- End Footer -->
            <script type="text/javascript">
                $(function() {

                    $(document).on("click", "#loginButton", function(e) {
                        e.preventDefault();

                        var login = $("#login").val();
                        var password = $("#password").val();
                        if (login === "") {
                            showPopupBoxMessage("El campo usuario no puede estar vacio");
                        } else if (password === "") {
                            showPopupBoxMessage("El campo password no puede estar vacio");
                        } else {
                            //--- realizo la peticion al controlador
                            $.ajax({
                                type: "POST",
                                url: "controlador/SeguridadUsuario.php",
                                data: "OPERACION=login&login=" + login + "&password=" + password + "&controlador=SeguridadUsuario",
                                dataType: 'json',
                                cache: false,
                                success: function(item) {
                                    if (item.hasOwnProperty("ERROR")) {
                                        showPopupBoxMessage(item.ERROR);
                                    } else {
                                        window.location.href = "vista/index.php";
                                    }
                                }, error: function(request, status, error) {
                                    alert(error);
                                    //$("#divError").append(error);
                                }
                            });
                        }
                    });

                });
            </script>

        </body>
    </html>
